<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写订单</title>
    <link rel="stylesheet" href="./font_fenlei/iconfont.css">
    <style>
        body{
            padding: 0;
            margin: 0;
            margin-bottom: 300px;
           /*  min-height: 2310px; */
            /* margin-bottom: 10px; */
        }
        .top{
            background-color: rgb(255, 138, 173);
            height: 200px;
           display: flex;
           flex-wrap: wrap;
           margin: 0;
        }
        .top a{
            text-decoration: none;
            margin-top: 30px;
            color: white;
            font-size: 80px;
            margin-left: 50px;
            margin-top: 50px;
        }
        .top h3{
            color: white;
            font-size: 65px;
            margin-left: 250px;
            margin-bottom: 20px;
        }

        .tixing{
            background-color: rgb(253,249,214);
            display: flex;
            width: 99%;
            border-radius:50px;
            margin-left: -30px;
        }
        .tixing img{
            margin-left: 50px;
            margin-top: 20px;
            height: 60px;
            
        }
        .tixing h2{
            margin-left: 10px;
            color: rgb(243,108,33);
            font-size: 30px;
            margin-right: 30px;
        }
        .tixing h1{
            color: rgb(243,108,33);
            margin-top: 25px;
        }
        .dizhi{}
        .dizhi>div{
            display: flex;
        }
        .dizhi1{
            margin-left: 20px;
            margin-top: 30px;
        }
        .dizhi1 :nth-child(1){
            margin-left: 20px;
            padding: 5px 15px;
            border-radius: 10px;
            font-size: 30px;
            background-color: rgb(255, 46, 26);
            color:white;
        }
        .dizhi1 :nth-child(2){
            margin-left: 10px;
            padding: 5px 15px;
            border-radius: 10px;
            font-size: 30px;
            background-color: rgb(77, 136, 254);
            color:white;
        }
        .dizhi1 :nth-child(3){
            margin-left: 10px;
            margin-top: 8px;
            font-size: 30px;
            color: #000;
        }
        .dizhi2{
            margin-top: 10px;
            display: flex;
        }
        .dizhi2 :nth-child(1){
            margin-left: 30px;
            font-size: 40px;
           
            
        }
        .dizhi2 :nth-child(2){
            margin-left: 20px;
            font-size: 80px;
            margin-right: 30px;
            margin-top: -30px;
            text-decoration: none;
            color: rgb(204,204,204);
        }
        .dizhi3{
            display: flex;
        }
        .dizhi3 :nth-child(1){
            margin-top: 10px;
            margin-left: 30px;
            font-size: 35px;
        }
        .dizhi3 :nth-child(2){
            margin-left: 20px;
            font-size: 35px;
            margin-top: 10px;
        }
        .dizhi4 :nth-child(1){
            margin-top: 40px;
            width: 100%;
        }
        .dizhi4 :nth-child(2){
            width: 100%;
            height: 50px;
        }
        .sp1{
            display: flex;
        }
        .sp1 img{
            margin-left: 30px;
            margin-top: 30px;
            height: 60px;
        }
        .sp1 h2{
            font-size: 40px;
            margin-left: 30px;
        }
        .sp2{
            display: flex;
            position: relative;
        }
        .sp21 img
        {
            margin-left: 30px;
            height: 300px;
            margin-right: 30px;
        }
        .sp22 :nth-child(1){
            font-size: 25px;
        }
        .sp22 :nth-child(3){
            color: rgb(243,39,12);
            margin-top: 40px;
            font-size: 40px;
        }
        .sp22 :nth-child(4){
            color: rgb(243,39,12);
            font-size: 80px;
            margin-left: 40px;
            position: absolute;
            top: 30px;
        }
        .sp22 :nth-child(5){
            color: rgb(243,39,12);
            font-size: 40px;
            position: absolute;
            top: 70px;
            left: 580px;
        }
        .sp22 :nth-child(6)
        {
            position: absolute;
            width: 50px;
            top: 135px;
            left: 656px;
        }
        .sp22 :nth-child(7){
            position: absolute;
            top: 135px;
            left: 800px;
        }
        .sp22 :nth-child(8){
            border:solid 1px rgb(213,61,60);
            border-radius: 10px;
            padding: 5px 10px;
            color: rgb(213,61,60);
            width: 165px;
            position: absolute;
            top: 200px;
        }
        .sp22 :nth-child(9)
        {
            border:solid 1px rgb(213,61,60);
            border-radius: 10px;
            padding: 5px 10px;
            color: rgb(213,61,60);
            width: 70px;
            position: absolute;
            top: 200px;
            left: 550px;
        }
        .zp{
            margin-top: 20px;
            margin-left: 40px;
            position: relative;
            
        }
        .zpk{
            font-size: 25px;
            color: rgb(131,131,131);
            
        }
        .zpk :nth-child(1){}
        .zpk :nth-child(2){
            margin-left: 20px;
        }
        .zpk :nth-child(3){
            position: absolute;
            left: 870px;
        }
        .sp3{
            margin-left: 40px;
            
        }
        .sp31{
            font-size: 20px;
            display: flex;
        }
        .sp31 :nth-child(1){
            margin-top: 50px;
            
        }
        .sp311{
            margin-left: 400px;
        }
        .sp311 :nth-child(1)
        {
            margin-left: 225px;
        }
        .sp31 :nth-child(3){
            text-decoration: none;
          margin-top: 30px;
          margin-left: 36px;
          color: rgb(131,131,131);
            font-size: 60px;
        }
/*         ///////////////////////// */
        .sp32{
            display: flex;
            font-size: 20px;
        }
        .sp32 img{
            height: 50px;
            margin-left: 20px;
            margin-top: 15px;
        }
        .sp321{
            margin-left: 245px;
        }
        .sp321 :nth-child(1){
            margin-left: 240px;
        }
        .sp33{
            display: flex;
            flex-wrap: wrap;
           
        }
        .sp33 h2{
            font-size: 30px;
        }
        .shuru{
            margin-left: 20px;
            border: 0px;
            width: 400px;
            margin-top: 15px;
            margin-left: 360px;
            height: 60px;
            font-size: 40px;
        }
        .shuru::-webkit-input-placeholder{
            color: rgb(170, 158, 158);
            font-size: 30px;
        }
        /* /////////////////// */
        .sp33 img{
            margin-top: 20px;
          width: 102%; 
            margin-left: -35px;
            height: 40px;
        }
/* /////////////////////////////////////////// */
        .jiage{}
        .jiage>div{
            display: flex;
            margin-left: 40px;
            font-size: 20px;
            margin-top: 20px;
        }
        .jiage :nth-child(1) :nth-child(2){
            margin-left: 530px;
        }
        .jiage :nth-child(2) :nth-child(2){
            margin-left: 585px;
        }
        .jiage :nth-child(3){
            color: rgb(224, 22, 22);
        }
        .jiage :nth-child(3) :nth-child(1){}
        .jiage :nth-child(3) :nth-child(2){
            font-size: 60px;
            margin-left: 5px;
            margin-top: -5px;
        }
        .jiage :nth-child(3) :nth-child(3){}
        .jiage :nth-child(3) :nth-child(4){
           margin-left: 400px;
           color: rgb(236, 222, 222);
           background-color: rgb(250, 55, 25);
           border-radius: 30px;
           padding: 20px 20px 1px;
           height: 60px;
           width: 200px;
           text-align: center;
           margin-top: -10px;
           
        }
        .sp21 img{
            width: 290px;
        }

        .bottom{
            background-color:white;        
            height: 130px;
            display: flex;  
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 10;
        }
        .bottom>div{
            display: flex;
            flex-grow: 1;
            height: 70px;
            margin-top: 10px;
            

        }
        .bottom a{
            text-decoration:none
        }
        .bottom span{
            font-size: 60px;
            margin-left: 40px;
            color: black;
           

        }
        .bottom p{
            color: black;
            margin-left: 40px;
            text-align: center;
        }
        .qwer{
            text-decoration: none;
        }
        .qwer h2{margin-top: 6px;}
    </style>
</head>
<body>
    <div class="top">
        <a href="./main.html"><</a>
        <h3>填写订单</h3>
    </div>

    <div class="tixing">
        <img src="./lingdang.png" alt="图片">
        <h2>温馨提醒：您购买的商品含二手商品，可点此查看购买提醒</h2>
        <h1>X</h1>
    </div>

    <div class="dizhi">
        <div class="dizhi1">
            <span>默认</span>
            <span>学校</span>
            <span>辽宁大连市甘井子城区</span>
        </div>
        <div class="dizhi2">
            <span>大连软件园路8号东软信息学校大连东软信息学院-三期派物流</span>
            <a href="#">></a>
        </div>
        <div class="dizhi3">
            <span>黄万瑜</span>
            <span>132****3414</span>
        </div>
    </div>
    <div class="dizhi4">
        <img src="./xiacaihong.png" >
        <img src="./xiahuitiao.png" >
    </div>

    <div class="sp">
        <div class="sp1">
            <img src="./shangbiao.png" >
            <h2>拍拍电脑数码优品官方旗舰店</h2>
        </div>
        <div class="sp2">
            <div class="sp21">
                <img src="./dingdan2.png" >
            </div>
            <div class="sp22">
                <h2>【资源机】Apple iPad Pro 2020款11/12.9...</h2>
                <span>20款Pro 11寸 256G 灰色 | WLAN版</span>
                <h5>￥</h5>
                <h2>5099</h2>
                <h5>.00</h5>
                <img src="./gantanhao.png" >
                <img src="./jiajian.png" >
                <h3>支持7天无理由退货</h3>
                <h3>7天价保</h3>
            </div>
            
            
        </div>
       
    </div>

    <div class="zp">
        <div class="zpk">
            <span>[赠品] </span>
            <span>赠品请勿单拍 单拍不发货 充电头 银色 128</span>
            <span>X1</span>
        </div>
        <div class="zpk">
            <span>[赠品] </span>
            <span>赠品请勿单拍 单拍不发货 数据线 银 128</span>
            <span>X1</span>
        </div>
        <div class="zpk">
            <span>[赠品] </span>
            <span>虚拟赠品无实物确认收货即享 灰 128</span>
            <span>X1</span>
        </div>
        <div class="zpk">
            <span>[赠品] </span>
            <span>虚拟赠品无实物确认收货即享 灰256</span>
            <span>X1</span>
        </div>
        <div class="zpk">
            <span>[赠品] </span>
            <span>赠品请勿单拍 单拍不发货 保护壳 灰色 64</span>
            <span>X1</span>
        </div>
    </div>

    <div class="sp3">
        <div class="sp31">
            <h2>配送</h2>
            <div class="sp311">
                <h2>快递运输</h2>
                <h2>预计11月1日24:00前送达</h2>
            </div>
            <a href="#">></a>
        </div>
        <div class="sp32">
            <h2>退换无忧</h2>
            <img src="./gantanhao.png">
            <div class="sp321">
                <h2>商家赠送</h2>
                <h2>享运费补贴或免费取件服务</h2>
            </div>
        </div>
        <div class="sp33">
            <h2>留言</h2>
            <input type="text" placeholder="建议留言前先与商家沟通确认" class="shuru">
            <img src="./xiahuitiao.png" >
        </div>
    </div>

    <div class="jiage">
        <div>
            <h2>商品金额</h2>
            <h2>￥5099.00</h2>
        </div>
        <div>
            <h2>退换无忧</h2>
            <h2>￥0.00</h2>
        </div>
        <div>
            <h2>￥</h2>
            <h2>5099</h2>
            <h2>.00</h2>
            <a href="./zhifu.html" class="qwer">
                <h2>提交订单</h2>
            </a>
          
        </div>
    </div>
    </div>

    
  <div class="bottom">
    <div>
        <a href="./main.html">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
    </a>
    </div>
    <div>
        <a href="./fenlei.html">
        <span class="iconfont icon-fenlei"></span>
        <p>分类</p>
    </a>
    </div>
    <div>
        <a href="#">
        <span class="iconfont icon-faxian"></span>
        <p>发现</p>
    </a>
    </div>
    <div>
        <a href="./pay.html">
        <span class="iconfont icon-gouwuche"></span>
        <p>购物车</p>
    </a>
        
    </div>
    <div>
        <a href="./wode.html">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
    </a>
    </div>
    
    
</div>

    <script>
        var tixing=document.getElementsByClassName("tixing")[0];
        var h1=tixing.querySelector("h1");
        h1.onclick=function(){
        tixing.style.display="none";
        }
    </script>
</body>
</html>